@import './variables.scss';

.global-container {
  display: inline-block;
  vertical-align: top;
}

.side-container {
  @extend .global-container;
  width: $side-container-width;
  padding: $space-10px;
}

.main-container {
  @extend .global-container;
  width: $main-container-width;
  padding: $space-10px;
  // text-align: center;
}

.card-container {
  position: relative;
  border: 1px solid $color-blue-10;
  padding: 10px 10px 20px 10px;
  background: url(../static/images/container-bg.png) 0 0 / 140px 140px repeat;
  margin-bottom: $space-10px;

  span, p {
    font-size: 10px;
  }

  h1, h2, h3, h4, h5 {
    line-height: 1.4;
    text-align: center;
  }

  h1 {
    color: $color-yellow;
    font-size: 18px;
  }

  h3 {
    color: $color-white;
    font-size: 14px;
  }

  h4 {
    color: $color-white;
    font-size: 10px;
  }
  
  h5 {
    color: $color-white;
    font-size: 10px;
    font-weight: normal;
    text-align: left;
  }

  .border-corner {
    position: absolute;
    width: 233px;
    height: 11px;
  }

  .border-lt {
    background: url('../static/images/border-lt.png') center / cover no-repeat;
  }

  .border-rt {
    background: url('../static/images/border-rt.png') center / cover no-repeat;
  }

  .border-lb {
    background: url('../static/images/border-lb.png') center / cover no-repeat;
  }

  .border-rb {
    background: url('../static/images/border-rb.png') center / cover no-repeat;
  }

  .p-top {
    top: 0;
  }
  .p-right {
    right: 0;
  }
  .p-bottom {
    bottom: 0;
  }
  .p-left {
    left: 0;
  }
}

.card-50 {
  width: 45%;
  display: inline-block;
  &:last-child {
    float: right;
  }
  .border-corner {
    width: 100%;
    height: 8px;
  }
}

.row {
  width: 100%;
}

.card-row {
  border: 1px solid $color-blue-10;
  background: rgba(0, 0, 0, .4);
  margin: $space-10px auto;
  padding: $space-10px;
}

.span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  .span-p {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    text-align: center;
    color: $color-white;
    font-size: 10px;
  }
  .span-d {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    color: $color-white;
    font-size: 10px;

  }
}

.span-50 {
  @extend .span;
  width: 50%;
}

.span-30 {
  @extend .span;
  width: 30%;
  &:not(:last-child) {
    margin-right: 5%;
  }
}

.inline-span {
  display: inline-block;
  vertical-align: top;
  // &:not(:last-child) {
  //   margin-right: $space-10px;
  // }
}

 // hide bmap anchor link

 .anchorBL {
   display: none;
 }